﻿<!DOCTYPE html>
<html lang="en">

<head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <!-- 百度压缩版引用地址: -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- 微软压缩版引用地址: -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <title>Document</title>
    <link rel="stylesheet" href="../css/comment.css">
    <link rel="stylesheet" href="../css/pingji_list.css">
</head>

<body>
    <div class="nav">
        <div class="head">
            <div class="head-img">
                <img src="../image/head1.jpeg" alt="ggggg" class="img">
            </div>
        </div>
        <div class="funcBar">
            <div class="choice">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="container-left">
            <div class="card">
                <div class="head-image">
                    <img src="../image/head2.jpeg" alt="g" id="head-image">
                </div>
                <div id="user-name-div">
                    <div id="user-name"><b id="name"></b></div>
                    <div id="user-shenfen"><b id="shenfen"></b></div>
                </div>
                <div id="card-bottom">
                    <div class="card-bottom-container">
                    </div>
                </div>
            </div>
        </div>
        <div class="container-right">
            <table>
                <thead>
                    <tr>
                        <th>订单ID</th>
                        <th>图片</th>
                        <th>状态</th>
                        <th>描述</th>
                        <th>结果</th>
                        <th>提交</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>

        </div>
    </div>

    </div>
    <script>
        let host = "http://localhost:8081/";
        var search = document.location.search;
        let id = search.substring(1).split('=')[1];
        console.log("debug");
        let user = getUserById(id);
        let name_id = document.querySelector("#name");
        name_id.innerHTML = user.name;
        let tbody = document.querySelector("#tbody");
        let response = getOrderList(id);
        if (response.errCode == 1) {
            alert("response error");
        }
        let count = response.length;
        let list = response.list;
        console.log(list);
        for (let i = 0; i < count; i++) {
            console.log(list[i]);
            createLine(list[i]);
        }
        // <!-- <td>1</th>
        //         <td>pic</th>
        //         <td>待处理</th>
        //         <td>asdsadsadas</th>
        //         <td><input type="text"></th>
        //         <td><form action=""><button disabled="true">提交</button></form></th> -->
        function createLine(order) {
            let els = new Array();
            let tr = document.createElement("tr");
            for (let i = 0; i < 6; i++) {
                els[i] = document.createElement("td");
            }
            els[0].innerHTML = order.id;
            let img = document.createElement("img");
            let pathpre = "http://localhost:8081/";
            img.src = pathpre + order.path;
            img.className = "img";
            els[1].appendChild(img);
            els[2].innerHTML = order.status;
            els[3].innerHTML = order.desc;
            let res = order.result;
            let txt;
            if (res == null) {
                txt = document.createElement("input");
                txt.type = "text";
                txt.id = "txt_id";
                els[4].appendChild(txt);
            }
            else if(res!=null && order.status=='申诉中'){
                txt = document.createElement("input");
                txt.type = "text";
                txt.id = "txt_id";
                els[4].appendChild(txt);
                txt.value=order.result;
            }
            else {
                els[4].innerHTML = order.result;
            }
            let form = document.createElement("form");
            let but = document.createElement("button");
            but.type = "button";
            but.innerHTML = "提交";
            but.className = "button";

            if (res != null) {
                but.disabled = true;
            }
            if(order.status=='申诉中'){
                but.disabled=false;
            }
            form.action = "http://localhost/submit";
            form.appendChild(but);
            els[5].appendChild(form);
            for (let i = 0; i < 6; i++) {
                tr.appendChild(els[i]);
            }
            tbody.appendChild(tr);
            but.onclick = function () {
                let tr=this.parentNode.parentNode.parentNode;
                let els=tr.childNodes;
                console.log(els);
                $.ajax({
                    url: host + "submit",
                    type: 'POST',
                    dataType: 'json',
                    contentType: "application/json",
                    data: JSON.stringify({
                        'userId': id,
                        'orderId': els[0].innerHTML,
                        'result': txt.value
                    }),
                    success: function (data) {
                        els[2].innerHTML = data.status;
                        els[4].firstChild.remove();
                        els[4].innerHTML = data.result;
                        els[5].disabled = true;
                    },
                    error: function (data) {

                    }

                })
            }
        }
        function getOrderList(id) {
            let response;
            $.ajax({
                url: host + "query/all_order",
                type: "get",
                data: 'id=' + id,
                dataType: 'json',
                async: false,
                success: function (data) {
                    response = data;
                },
                error: function (data) {
                    alert("response error");
                }
            })
            return response;
        }
        function getUserById(id) {
            let user;
            $.ajax({
                url: host + "query",
                type: "get",
                data: 'id=' + id,
                dataType: 'json',
                async: false,
                success: function (data) {
                    user = { 'id': data.id, 'name': data.name, 'isVIP': data.isVIP }
                    console.log(user);
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                }
            })
            return user
        }
    </script>
</body>

</html>